<!-- 占道经营/违规事件 -->
<template>
  <div style="height: 100%">
    <checked-title
      :typeNumber="1"
      :width="348"
      title="街办案件占比"
    >
      <template #right>
        <div
          :class="active == item.value ? 'active' : ''"
          :key="index"
          @click="tabChange(item.value)"
          class="title2 pointer"
          v-for="(item, index) in tabList"
        >{{ item.title }}</div>
      </template>
    </checked-title>
    <div
      class="chunk_con"
      id="Violations"
      ref="Violations"
    ></div>
  </div>
</template>

<script>
import { getViolationsScreen } from '@/api/index'
import { ZhanDaoJingYing } from '@/api'

export default {
  data() {
    return {
      optionData: [],
      num: 0,
      tabList: [
        { title: '本日', value: '1' },
        { title: '本周', value: '2' },
        { title: '本月', value: '3' },
        { title: '本年', value: '4' }
      ],
      active: '4'
    }
  },
  mounted() {
    // this.renderChart()
    this.getList()
  },
  beforeDestroy() {
    this.desHander()
  },
  methods: {
    tabChange(active) {
      this.active = active
      // this.rankingList('tabChange');
      this.num = 0
      this.getList('tabChange')
    },
    //shuju
    getList(type) {
      const data = {
        type: this.active
      }
      ZhanDaoJingYing.GetStreet(data)
        .then(res => {
          this.optionData = res.data
          res.data.forEach(item => {
            let data = Number(item.value)
            this.num += data
          })
          if (type == 'tabChange') {
            this.desHander()
            this.$nextTick(() => {
              this.renderChart()
            })
          } else {
            this.renderChart()
          }
        })
        .catch(err => {
        })
    },
    renderChart() {
      const myChart = echarts.init(this.$refs.Violations)
      let option = {
        color: [
          '#FF3D6E',
          '#80FA50',
          '#FF9159',
          '#FFDB6A',
          '#62A0FD',
          '#DF11FC',
          '#FF6A72',
          '#00FFFE',
          '#008EFC'
        ],
        tooltip: {
          trigger: 'axis'
          // formatter:"件",
        },
        legend: {
          icon: 'circle',
          right: '20',
          align: 'left',
          itemWidth: 8,
          itemGap: 8,
          textStyle: {
            color: '#CFD2D6'
          },
          top: 'bottom'
        },
        // title: {
        //   text: `${this.num}件\n案件总数`,
        //   textAlign: 'center',
        //   top: '30%',
        //   left: '48%',
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: 20,
        //     fontWeight: '400',
        //   },
        //   // subtext: '50%',
        //   subtextStyle: {
        //     color: '#021C25',
        //     fontSize: 32,
        //     fontWeight: '600',
        //     lineHeight: 60,
        //   },
        // },
        series: [
          {
            type: 'pie',
            radius: ['40%', '66%'],
            center: ['50%', '40%'],
            label: {
              show: false,
              fontSize: 16,
              // formatter: '{b}{c}',
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold',
                formatter: '{value|{c} 件}\n{name|{b}}',
                rich: {
                  name: {
                    color: '#fff',
                    fontSize: 20,
                    fontWeight: '400'
                  },
                  value: {
                    color: '#fff',
                    fontSize: 20,
                    fontWeight: '400'
                  }
                }
              }
            },
            avoidLabelOverlap: false,
            data: this.optionData
          }
        ]
      }
      myChart.setOption(option)
      // myChart.on('mouseover', function() {
      //   myChart.setOption({
      //     title: {
      //       show: false,
      //     },
      //   })
      // })
      // let self = this
      // myChart.on('mouseout', function() {
      //   myChart.setOption({
      //     title: {
      //       show: true,
      //       text: `${self.num}\n案件总数`,
      //       textAlign: 'center',
      //       top: '30%',
      //       left: '48%',
      //       textStyle: {
      //         color: '#fff',
      //         fontSize: 20,
      //         fontWeight: '400',
      //       },
      //       // subtext: '50%',
      //       subtextStyle: {
      //         color: '#021C25',
      //         fontSize: 32,
      //         fontWeight: '600',
      //         lineHeight: 60,
      //       },
      //     },
      //   })
      // })
    },

    desHander() {
      let myChart = echarts.init(this.$refs.Violations)
      myChart.dispose()
    }
  }
}
</script>

<style lang="less" scoped>
.chunk_con {
  height: calc(100% - 80px);
}
</style>
